<template>
  <!-- 授权弹窗里的活动规则弹窗 -->
  <div v-if="show">
    <div class='modal'></div>
    <div class="privacy-policy-m">
      <div class="privacy-policy">
        <div class="modal-con">
          <p class="title">云南中行-缤纷卡券活动</p>
          <p class="modal-t">一、活动时间：</p>
          <p>活动时间:2024年3月1日至2024年12月1日期间，每周五10：00起派券，数量有限，先到先得。</p>
          <p class="modal-t">二、活动路径：</p>
          <p>中国银行微银行云南分行微信公众号 > 荟生活 > 云南e卡惠（本地优惠专区）> 惠聚星期五 > 缤纷消费券。
            或扫码进入活动页面（用活动链接生成二维码）</p>
          <p class="modal-t">三、活动对象：云南分行发行的信用卡客户</p>
          <p>中国银行信用卡持卡人(仅限云南分行发行的信用卡客户)</p>
          <p class="modal-t">四、活动内容</p>
          <p>活动期间，持卡人通过 “中国银行微银行云南分行”微信公众号 > 荟生活 > 云南e卡惠（本地优惠专区）> 惠聚星期五 >
            缤纷消费券专区，免费领取或者购买优惠券。您也可以扫描活动二维码购买指定热门品牌优惠消费券，使用中国银行云南分行发行的信用卡绑定微信并成功支付，即有机会参与消费优惠。</p>
          <p>活动期间，每客户每自然月限享1次优惠(专区内所有品牌统一计次)。活动期间名额共计50000名，先到先得，用完即止。<span>活动编码:【分】YN23004</span>
          </p>
          <p class="modal-t">五、活动细则:</p>
          <p>
            1、本活动适用于账户及卡片状态正常且卡在有效期内，中国银行云南分行发行的信用卡。(客户办卡预留手机号码须与微信绑定手机号码相同)。</p>
          <p>
            2、同一手机号码、同一银行卡号、同一身份证号码、同一手机设备，符合其中一个条件者视为同一客户，每客户每自然月限享1次优惠(专区内所有品牌统一计次)，名额有限，先到先得，用完即止。</p>
          <p>3、消费券有效期以展示为准，领取之日起7日内有效，请在有效期内使用。</p>
          <p>4、持卡人参与活动即视为理解并同意本活动细则，活动中持卡人如遇问题请与活动服务商蓝鼎网络联系和解决(客服电话400-8808-248
            );对于活动规则可详询中国银行信用卡客服热线400-6695-566，如有疑问或投诉请于2024年12月31日前提出。</p>
          <p>
            为保证活动公平与公正性，购买用户须按照诚实信用原则参与购买，对任何采用作弊、欺诈、不当买卖、非法获利、恶意软件以获取电子码信息等手段的，有权取消其本活动购买资格，因上述行为造成运营方或其他用户损失的，相关运营方有权追究其法律责任。</p>
          <p>关注“中国银行微银行云南省分行”微信公众号--“荟生活”--“云南e卡惠”相关活动页面了解活动详细规则。</p>
        </div>
      </div>
      <div class="close-btn" @click="handleCloseBtn"></div>
    </div>
  </div>
</template>

<script setup>
import {defineProps, ref} from 'vue'
//子组件接收父组件的值
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['handleARCloseChang'])

const handleCloseBtn = () => {
  emits("handleARCloseChang")
}
</script>

<style lang="scss" scoped>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 2023;
}

.privacy-policy-m {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 644px;
  height: auto;
  z-index: 2024;

  .privacy-policy {
    width: 644px;
    height: 1085px;
    padding: 15px;
    background: linear-gradient(to bottom, #ebc38f, #e7b87f);
    border-radius: 30px;
    box-sizing: border-box;
  }

  .modal-con {
    padding: 45px 24px 24px;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    border-radius: 20px;
    background-color: #fff;
    box-sizing: border-box;

    .modal-t {
      margin-top: 15px;
      font-weight: bold;
    }

    p {
      text-align: justify;
      font-size: 28px;
      line-height: 1.6em;
      color: #2a2a2a;

      span {
        color: red;
      }
    }

    .title {
      margin-bottom: 20px;
      text-align: center;
      font-size: 36px;
      font-weight: bold;
      color: #2a2a2a;
    }

    .h1 {
      font-size: 20px;
      color: #000000;
      font-weight: bold;
    }
  }

  .close-btn {
    margin: 33px auto 0;
    width: 78px;
    height: 78px;
    background: url("@/assets/image/04_icon_close.png") no-repeat;
    background-size: contain;
  }
}
</style>
